<template>
 <div class="table-pro">
  <!-- 导出 -->
   <slot name="export">
      <div class="export-btn">
        <el-button type="defalut" @click="handleExport">导出</el-button>
      </div>
   </slot>
  <!-- 表格 -->
  <el-table
    class="table"
    :data="dataSource" 
    style="width: 100%"
    border
  >
    <!-- 循环列表渲染表格中的列 -->
    <el-table-column
        v-for="column in columns"
        :key="column.prop"
        v-bind="column"
    >
      <template v-if="column.type === 'slot'" #default="scope">
        <slot :name="column.prop" v-bind="scope" />
      </template>
    </el-table-column>
    <!-- <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" /> -->
  </el-table>
  <!-- 分页器 -->
  <el-pagination 
        background
        layout="total, prev, pager, next, sizes, jumper"
        :total="total"
        @change="handleTurnPage"
    />
 </div>
</template>

<script lang='ts' setup>
import { ref } from 'vue'
import { utils, writeFileXLSX } from 'xlsx'
// 定义属性类型
interface Props{
    columns: ITableColumn[], // 表格列定义
    requestApi: Function // 请求数据的api
}
// 组件接收的的属性
const props = defineProps<Props>()

// 定义表格数据
const dataSource = ref<any[]>([])
// 总记录数
const total = ref(0)
// 当前页码
const page = ref(1)
// 每页显示的条数
const pageSize = ref(10)
// 加载表格中的数据
const loadData = async () => {
  const res = await props.requestApi({
    page: page.value,
    pageSize: pageSize.value
  })
  dataSource.value = res.list
  total.value = res.total
  page.value = res.page
  pageSize.value = res.pageSize
}
loadData()

// 处理翻页效果
const handleTurnPage = (_currPage: number, _pageSize: number) => {
  page.value = _currPage,
  pageSize.value = _pageSize
  // 翻页
  loadData()
}

// 导出数据
const handleExport = () => {
  // 将需要导出的数据转换为工作表中要保存的数据
  const ws = utils.json_to_sheet(dataSource.value)
  // 创建工作簿
  const wb = utils.book_new()
  // 将工作表添加到工作簿中
  utils.book_append_sheet(wb, ws, '工作表')
  // 将工作簿中的数据写入到文件中
  writeFileXLSX(wb, new Date().toISOString() + '.xlsx')
}

</script>

<style lang='scss' scoped>
.table-pro{
    padding: 12px;
    .export-btn{
        margin-top: -10px;
        margin-bottom: 10px;
    }
    .table{
        margin-bottom: 10px;
    }
}
</style>
